<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="rendered-form">
    <label for="form-name"  class="formbuilder-text-label">表单名称</label>
    <input id="form-name" class="form-control" type="text" name="formName" th:value="${formName}" required="required">
</div>
<div id="fb-editor" class="render-wrap"></div>
<th:block th:include="include :: footer" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://formbuilder.online/assets/js/form-builder.min.js"></script>
<script src="https://formbuilder.online/assets/js/form-render.min.js"></script>
<script th:inline="javascript">
    jQuery(function($) {
        //初始化表单设计器
        var options = {
            dataType: 'json',
            i18n: {
                locale: 'zh-CN',
                location: '/lang/'
            },
            disableFields: ['autocomplete',"header","hidden","paragraph"],//禁用组件
            onSave: function(evt, formData) {
                saveFormDef(formData);
            },
            typeUserAttrs: {
                button:{
                    onclick:{
                        label: '触发函数',
                        multiple: false, // optional, omitting generates normal <select>
                        options: {
                            'submit()': '提交',
                            'jump()': '驳回到'
                        },
                    }
                },
                text:{
                    disabled:{
                        label: 'disabled',
                        multiple: false, // optional, omitting generates normal <select>
                        options: {
                            '': '可写',
                            'disabled': '禁用'
                        },
                    }
                },
                textarea:{
                    disabled:{
                        label: 'disabled',
                        multiple: false, // optional, omitting generates normal <select>
                        options: {
                            '': '可写',
                            'disabled': '禁用'
                        },
                    }
                },
                select:{
                    disabled:{
                        label: 'disabled',
                        multiple: false, // optional, omitting generates normal <select>
                        options: {
                            '': '可写',
                            'disabled': '禁用'
                        },
                    }
                },
                "radio-group":{
                    disabled:{
                        label: 'disabled',
                        multiple: false, // optional, omitting generates normal <select>
                        options: {
                            '': '可写',
                            'disabled': '禁用'
                        },
                    }
                },
                number:{
                    disabled:{
                        label: 'disabled',
                        multiple: false, // optional, omitting generates normal <select>
                        options: {
                            '': '可写',
                            'disabled': '禁用'
                        },
                    }
                },
                file:{
                    disabled:{
                        label: 'disabled',
                        multiple: false, // optional, omitting generates normal <select>
                        options: {
                            '': '可写',
                            'disabled': '禁用'
                        },
                    }
                },
                date:{
                    disabled:{
                        label: 'disabled',
                        multiple: false, // optional, omitting generates normal <select>
                        options: {
                            '': '可写',
                            'disabled': '禁用'
                        },
                    }
                },
                "checkbox-group":{
                    disabled:{
                        label: 'disabled',
                        multiple: false, // optional, omitting generates normal <select>
                        options: {
                            '': '可写',
                            'disabled': '禁用'
                        },
                    }
                },
            },
            //监听器
            typeUserEvents: {
                text: {
                    onadd: function(fld) {
                        //do something
                    }
                }
            }
        };
        var formData = [[${formData}]];
        if(formData){
            options.formData = formData;
        }
        var formBuilder = $(document.getElementById('fb-editor')).formBuilder(options);
    });
    function toggleEdit(editing) {
        document.body.classList.toggle("form-rendered", !editing);
    }
    function saveFormDef(formDefData){
        console.log(formDefData);
        /*$.ajax({
            url:'/form/save',
            type:'post',
            data:{
                formData:formDefData
            },
            success:function(res){
                if(res.code==0){
                    console.log($.modal)
                }

            },
            error:function(err){
                console.log(err)
            }
        });*/
        var formId = [[${formId}]];
        var formName = $("#form-name").val();
        var params = {formData:formDefData,formName:formName};
        if(formId){
            params.formId = formId;
        }
        $.operate.save("/form/save",params);
    }
</script>
</body>
</html>